import React, { useEffect, useState } from 'react'
import { fetchListByParams } from '../../api'
import { InfiniteScroll, List, Image } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'


export interface ListItemState {
	'title': string,
	'desc': string,
	'url': string,
	'id': number
}


const Index: React.FC = () => {
	const [list, setList] = useState<ListItemState[]>([]);
	// const [errorMessage, setErrorMessage] = useState('')
	const [pageCode, setPageCode] = useState(1)
	const [pageSize, setPageSize] = useState(10)
	const [hasMore, setHasMore] = useState(true)
	const navigate = useNavigate()
	const fetchList = async () => {
		const resp = await fetchListByParams({ pageCode, pageSize });
		const { code, data, message } = resp.data;
		if (code === 200) {
			setList([...list, ...resp.data.data])
			setPageCode(pageCode + 1)
		} else {
			// setErrorMessage(message)
			setHasMore(false)
		}
	}

	return (
		<div>
			<div>
				<input type="text" onFocus={() => navigate('/search')} />
				<button onClick={() => navigate('/tag')}>标签</button>
				<button onClick={() => navigate('/sign')}>签到</button>
			</div>
			<List>
				{list.map((item, index) => (
					<List.Item
						key={index}
						title={item.title}
						description={item.desc}
						prefix={<Image lazy src={item.url} fit='fill' width={120} height={80}></Image>}
					>

					</List.Item>
				))}
			</List>
			<InfiniteScroll loadMore={fetchList} hasMore={hasMore} />
		</div>
	)
}


export default Index